<template>
  <div class="content">
    <site-nav />
    <head-item />
    <information-item :images="images" />
    <product-item />
    <hot-item />
    <advantage-item />
    <guide-item />
    <friendly-link />
    <footer-item />
  </div>
</template>

<script>
import SiteNav from '../../layout/Nav'
import AdvantageItem from '../../layout/Advantage'
import GuideItem from '../../layout/Guide'
import FriendlyLink from '../../layout/FriendlyLink'
import FooterItem from '../../layout/Footer'
import HeadItem from './component/Head'
import ProductItem from './component/Product'
import InformationItem from './component/Information'
import HotItem from './component/Hot'
// import CharactersDet from '../detail/component/CharactersDetail'
// import cart from '../cart/index'

import { listCarouselWap } from '../../api/home/index'
export default {
  name: 'Home',
  components: {
    SiteNav,
    AdvantageItem,
    GuideItem,
    FriendlyLink,
    FooterItem,
    HeadItem,
    ProductItem,
    InformationItem,
    HotItem
    // CharactersDet,
    // cart
  },
  data() {
    return {
      images: []
    }
  },
  mounted: function() {
    this.getListCarouselWap()
  },
  methods: {
    getListCarouselWap() {
      listCarouselWap().then(res => {
        this.images = res.data
      })
    }
  }
}
</script>

<style scoped lang="scss">
.content{
  .font{
    color: red;
  }
}
</style>
